<template>
	<view>
		<view class=" flex flex-x-space-between flex-y-center mt-20 px-35  rounded-12 bg-white p-12 position-relative">
			<image src="@/static/icon/index/clear.png"
				class="w-24 h-24 rounded-circle position-absolute right-10 top-10" @click="clear"></image>
			<l-circle :percent="answer" canvas gapPosition="bottom" :dashboard='true' size="200rpx" trailWidth='8'  strokeColor='#3D5CFF'>
				<view class="fs-14">
					<text class="text-blue-1 fw-600 fs-18">{{info?.wrong_num + info?.correct_num}}</text>
					<text>/{{info?.total}}</text>
				</view>
			</l-circle>
			<view class="flex flex-column grid-column-8">
				<view class="fs-14 flex flex-y-center">
					<text class="text-grey-4 mr-10">总进度</text>
					<text class="fs-18 fw-600">{{all}}%</text>
				</view>
				<view class="fs-14 mt-15 flex flex-y-center">
					<text class="text-grey-4 mr-10">正确率</text>
					<text class="fs-18 fw-600">{{info?.rate}}%</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onBeforeMount } from 'vue'
	import { $page, $tool, $http, useStorage } from '@/utils'
	const info = ref()
	const all = ref(0)
	const answer = ref(0)
	const emit = defineEmits(['clear'])
	onBeforeMount(() => {
		getRecord()
	})
	const getRecord = () => {
		let id = useStorage().get('CATEGORY')
		$http.get('record/getAllRecord', { classification_id: id }).then(res => {
			info.value = res.data
			if (res.data.total != 0) {
				let num1 = ((res.data.wrong_num + res.data.correct_num) / res.data.total) * 100
				all.value = num1.toFixed(2)
			}
			answer.value = Math.floor((((res.data.wrong_num + res.data.correct_num) / info.value.total) *
				100))
		})
	}
	const clear = () => {
		uni.showModal({
			title: '温馨提示',
			content: '确认清除刷题数据？',
			success(res) {
				if (res.confirm) {
					$http.get('Record/clearRecord').then(res => {
						$tool.toast(res.msg);
						emit('clear')
					})
				}
			}
		})
	}
	defineExpose({ getRecord })
</script>

<style>
</style>